<!-- <form action=""></form> -->
<div class="dataTable data-title-color">
  <div class="title">{{'DataManagement.TrafficDataReport.TrafficDataReport' | translate}}</div>

  <div class="table-content">
    <!-- 第一行 -->
    <div class="report_filter" nz-row>

      <div class="title-input" style="display: flex;align-items: center" nz-col nzSpan="4.8">
        <div class="title-margin">{{'DataManagement.TrafficDataReport.DetectorRoad' | translate}}
        </div>
        <nz-select [nzDisabled]="flag" style="width: 2rem" [nzDropdownMatchSelectWidth]="false" nzAllowClear
          [(ngModel)]="roadSelect">
          <nz-option *ngFor="let option of roadOptions" [nzValue]="option.name" [nzLabel]="option.name">
          </nz-option>
        </nz-select>
        <!-- <span nz-col nzSpan="2">
      <i class="iconfont icon-dingwei" style="cursor: pointer" (click)="getGisPosition('roadSelect')"></i>
    </span> -->
      </div>

      <div class="title-input" style="display: flex;align-items: center" nz-col nzSpan="4.8">
        <div class="title-margin">{{'DataManagement.TrafficDataReport.TimeRange' | translate}}</div>
        <!-- <nz-range-picker [nzDisabled]="flag" nzFormat="yyyy-MM-dd" nzSize="default" [(ngModel)]="dateRange" (nzOnOk)="onOk($event)"
      (ngModelChange)="onChange($event)"></nz-range-picker>
    <nz-time-picker [nzDisabled]="flag" style="margin: 0 20px" nzPlaceHolder='Start Time' [(ngModel)]="startTime" nzFormat="HH:mm"
      (ngModelChange)='startTimeSearch()'></nz-time-picker>
    <nz-time-picker [nzDisabled]="flag" nzPlaceHolder='End Time' [(ngModel)]="endTime" nzFormat="HH:mm" (ngModelChange)='endTimeSearch()'>
    </nz-time-picker> -->
        <nz-range-picker [nzPlaceHolder]="['Start Time', 'End Time']" [(ngModel)]="dateRange"
          (ngModelChange)="onChange($event)" (nzOnOk)="onOk($event)" [nzDisabledDate]="disabledDate"
          [nzDisabledTime]="disabledRangeTime">
        </nz-range-picker>
      </div>

      <!-- <div style="display: flex;align-items: center">
    <div style="font-weight: bold;font-size:14px">{{'DataManagement.TrafficDataReport.StartTime' | translate}}</div>
    <nz-time-picker nzPlaceHolder='Start Time' [(ngModel)]="startTime" nzFormat="HH:mm" (ngModelChange)='startTimeSearch()'></nz-time-picker>
  </div>
  <div style="display: flex;align-items: center">
    <div style="font-weight: bold;font-size:14px">{{'DataManagement.TrafficDataReport.EndTime' | translate}}</div>
    <nz-time-picker nzPlaceHolder='End Time' [(ngModel)]="endTime" nzFormat="HH:mm" (ngModelChange)='endTimeSearch()'></nz-time-picker>
  </div> -->

      <div class="title-input" style="display: flex;align-items: center" nz-col nzSpan="4.8">
        <div class="title-margin">{{'DataManagement.TrafficDataReport.Include' | translate}}</div>
        <nz-select [nzDisabled]="flag" nzPlaceHolder="include" style="width: 1.5rem" nzAllowClear
          [(ngModel)]="includeSelect">
          <nz-option *ngFor="let option of includeOptions" [nzValue]="option.id"
            [nzLabel]="'DataManagement.TrafficDataReport.'+option.name|translate">
          </nz-option>
        </nz-select>
      </div>

      <div class="title-input" style="display: flex;align-items: center" nz-col nzSpan="4.8">
        <div class="title-margin">{{'DataManagement.TrafficDataReport.Interval' | translate}}</div>
        <nz-select [nzDisabled]="flag" nzPlaceHolder="interval" style="width: 2rem" nzAllowClear
          [(ngModel)]="intervalSelect">
          <nz-option *ngFor="let option of intervalOptions" [nzValue]="option.name"
            [nzLabel]="'DataManagement.TrafficDataReport.'+option.name|translate">
          </nz-option>
        </nz-select>
      </div>

      <!-- <div>
    <nz-switch [ngModel]="false" (ngModelChange)='trueSearch()' nzCheckedChildren="{{'DataManagement.TrafficDataReport.Historical' | translate}}"
      nzUnCheckedChildren="{{'DataManagement.TrafficDataReport.Current' | translate}} "></nz-switch>
  </div> -->

      <!-- <div class="flex fa-align-center" style="flex-direction: row;" nz-col nzSpan="4.8"
        style="text-align: center;justify-content: space-around; align-items: center;"> -->
      <!-- <div style="font-weight: bold;font-size:14px">{{'DataManagement.TrafficDataReport.dataSource' | translate}}</div> -->
      <!-- <nz-select nzPlaceHolder="" style="width: 2rem" nzAllowClear [(ngModel)]="sourcelSelect"
      (ngModelChange)='sourceSearch()'>
      <nz-option nzValue="current" nzLabel="Current"></nz-option>
      <nz-option nzValue="historical" nzLabel="Historical"></nz-option>
    </nz-select> -->
      <!-- <nz-switch [(ngModel)]="sourcelSelect" nzCheckedChildren="Current" nzUnCheckedChildren="Historical" (ngModelChange) = "switchChange($event)"></nz-switch> -->
      <!-- <nz-radio-group [(ngModel)]="sourcelSelect" [nzButtonStyle]="'solid'" (ngModelChange)="switchChange($event)">
          <label nz-radio-button [nzValue]="true">{{'DataManagement.TrafficDataReport.Current' |
            translate}}</label><label nz-radio-button [nzValue]="false">{{'DataManagement.TrafficDataReport.Historical'
            | translate}}</label>
        </nz-radio-group> -->
      <!-- <div class="searchButton" (click)="search()"><i class="iconfont icon-search"></i>{{'DataManagement.RoadCongestionReport.Search' | translate}}</div> -->
      <!-- <button nz-button nzType="primary" (click)="search()" style="margin-left: 20px;"><i nz-icon nzType="search"
            nzTheme="outline"></i>{{'DataManagement.RoadCongestionReport.Search' | translate}}
        </button>
      </div> -->

    </div>
    <!-- 第二行 -->
    <div class="report_filters" nz-row>
      <div class="flex fa-align-center" style="flex-direction: row;" nz-col nzSpan="8"
        style="text-align: center;justify-content: flex-end; align-items: center;">
        <!-- <div style="font-weight: bold;font-size:14px">{{'DataManagement.TrafficDataReport.dataSource' | translate}}</div> -->
        <!-- <nz-select nzPlaceHolder="" style="width: 2rem" nzAllowClear [(ngModel)]="sourcelSelect"
    (ngModelChange)='sourceSearch()'>
    <nz-option nzValue="current" nzLabel="Current"></nz-option>
    <nz-option nzValue="historical" nzLabel="Historical"></nz-option>
  </nz-select> -->
        <!-- <nz-switch [(ngModel)]="sourcelSelect" nzCheckedChildren="Current" nzUnCheckedChildren="Historical" (ngModelChange) = "switchChange($event)"></nz-switch> -->
        <nz-radio-group [(ngModel)]="sourcelSelect" [nzButtonStyle]="'solid'" (ngModelChange)="switchChange($event)" style="display: flex;">
          <label nz-radio-button [nzValue]="true">{{'DataManagement.TrafficDataReport.Current' |
            translate}}</label><label nz-radio-button [nzValue]="false">{{'DataManagement.TrafficDataReport.Historical'
            | translate}}</label>
        </nz-radio-group>
        <!-- <div class="searchButton" (click)="search()"><i class="iconfont icon-search"></i>{{'DataManagement.RoadCongestionReport.Search' | translate}}</div> -->
        <button nz-button nzType="primary" (click)="search()" style="margin-left: 20px;"><i nz-icon nzType="search"
            nzTheme="outline"></i>{{'DataManagement.RoadCongestionReport.Search' | translate}}
        </button>
      </div>
      <!-- <div style="display: flex;align-items: center" nz-col nzSpan="8">
        <div style="font-weight: bold;font-size:14px">{{'DataManagement.TrafficDataReport.Interval' | translate}}</div>
        <nz-select [nzDisabled]="flag" nzPlaceHolder="interval" style="width: 2rem" nzAllowClear
          [(ngModel)]="intervalSelect">
          <nz-option *ngFor="let option of intervalOptions" [nzValue]="option.name"
            [nzLabel]="'DataManagement.TrafficDataReport.'+option.name|translate">
          </nz-option>
        </nz-select>
      </div>
      <div>
        <nz-switch [ngModel]="false" (ngModelChange)='trueSearch()'
          nzCheckedChildren="{{'DataManagement.TrafficDataReport.Historical' | translate}}"
          nzUnCheckedChildren="{{'DataManagement.TrafficDataReport.Current' | translate}} "></nz-switch>
      </div>
      <div class="flex fa-align-center" style="flex-direction: row;" nz-col nzSpan="16"
        style="text-align: center;justify-content: space-around;">
        <div style="font-weight: bold;font-size:14px">{{'DataManagement.TrafficDataReport.dataSource' | translate}}
        </div>
        <nz-select nzPlaceHolder="" style="width: 2rem" nzAllowClear [(ngModel)]="sourcelSelect"
          (ngModelChange)='sourceSearch()'>
          <nz-option nzValue="current" nzLabel="Current"></nz-option>
          <nz-option nzValue="historical" nzLabel="Historical"></nz-option>
        </nz-select>
        <nz-switch [(ngModel)]="sourcelSelect" nzCheckedChildren="Current" nzUnCheckedChildren="Historical"
          (ngModelChange)="switchChange($event)"></nz-switch>
        <nz-radio-group [(ngModel)]="sourcelSelect" [nzButtonStyle]="'solid'" (ngModelChange)="switchChange($event)">
          <label nz-radio-button [nzValue]="true">{{'DataManagement.TrafficDataReport.Current' | translate}}</label>
          <label nz-radio-button [nzValue]="false">{{'DataManagement.TrafficDataReport.Historical' | translate}}</label>
        </nz-radio-group>
        <div class="searchButton" (click)="search()"><i
            class="iconfont icon-search"></i>{{'DataManagement.RoadCongestionReport.Search' | translate}}</div>
        <button nz-button nzType="primary" (click)="search()"><i nz-icon nzType="search"
            nzTheme="outline"></i>{{'DataManagement.RoadCongestionReport.Search' | translate}}
        </button>
      </div> -->
    </div>

  </div>


  <div class="table-content">
    <!-- 第三行 -->
    <div class="report" *ngIf="isShowEacharts">
      <div class="report_data">
        <!-- <div class="report_title"> -->
        <!-- {{'DataManagement.TrafficDataReport.VehiclesCount' | translate}} -->
        <!-- {{'DataManagement.TrafficDataReport.overview' | translate}} -->
        <!-- </div> -->
        <div echarts [options]="option1" (chartInit)="onChartInit1($event)"></div>
      </div>
      <!-- <div class="report_data">
    <div class="report_title">
      {{'DataManagement.TrafficDataReport.Occupancy' | translate}}
    </div>
    <div echarts [options]="option2" (chartInit)="onChartInit2($event)"></div>
  </div>
  <div class="report_data">
    <div class="report_title">
      {{'DataManagement.TrafficDataReport.Speed' | translate}}
    </div>
    <div echarts [options]="option3" (chartInit)="onChartInit3($event)"></div>
  </div> -->
    </div>
  </div>


  <div class="table-content">
    <!-- 第四行 -->
    <div class="report_bottom" *ngIf="isTableShow">
      <div class="bottom_title">
        <div class="font" style="color: white !important;">{{'DataManagement.TrafficDataReport.Date' | translate}}</div>
        <div class="font" style="margin-right: 15px;color: white !important;">{{sourcelSelect? thisDay :
          queryStartTime}} -
          {{sourcelSelect ? nextDay : queryEndTime}}</div>
        <div class="font" style="color: white !important;">{{'DataManagement.TrafficDataReport.Time' | translate}}</div>
        <div class="font" style="color: white !important;">{{sourcelSelect?'00:00:00':startTimeRange}}
          {{sourcelSelect?todayTime:endTimeRange}}</div>
        <!-- Date:2015-10-01 - 2015-10-31 Time: 06:00 23:59 -->
      </div>
      <div class="data_table">
        <div class="table_title">
          <div style="font-size: 22px;font-weight: bold;color: rgba(51, 51, 51, 1);">
            {{'DataManagement.TrafficDataReport.DetectorID' | translate}} {{this.detectorID}}</div>
          <div style="font-size: 22px;font-weight: bold;color: rgba(51, 51, 51, 1);">
            {{'DataManagement.TrafficDataReport.Road_Name' | translate}}
            {{this.roadName}}</div>
        </div>
        <nz-table id="nzTable" #basicTable [nzShowPagination]="false" [nzData]="listOfData" [nzFrontPagination]="false">
          <thead>
            <tr class="dataTitle">
              <th class="listTitle"></th>
              <th *ngFor="let item of renderHeader" class="listTitle" style="color: red;">
                <div>{{'DataManagement.TrafficDataReport.' + item.name | translate}}</div>
              </th>
            </tr>
          </thead>
          <tbody class="dataList">
            <tr *ngFor="let data of listOfData;index as i">
              <td></td>
              <td>{{data.interval_zone}}</td>
              <td>{{data.total_volume}}</td>
              <td>{{data.avg_occ}}</td>
              <td>{{data.avg_speed}}</td>
            </tr>
          </tbody>
          <tfoot class="pagination">
            <tr style="background-color: #2b2e52;">
              <td [attr.colspan]="renderHeader.length+1" style="padding: 10px;">
                <itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
                  [pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
                  (pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)"></itmp-pagination>
              </td>
            </tr>
          </tfoot>
        </nz-table>
      </div>
    </div>
  </div>
</div>